<template>
  <el-select
    ref="selectTree"
    placeholder="请选择"
    size="mini"
    clearable
    style="width: 100%"
    :value="value"
  >
    <el-option ref="option" class="tree-select__option" :value="value">
      <el-tree
        ref="tree"
        class="tree-select__tree"
        :data="data"
        :props="{
          label: 'title',
          children: 'childs',
        }"
        default-expand-all
        @node-click="nodeClick"
      ></el-tree>
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "TreeSelect",
  props: {
    // 树形的数据
    data: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      value: "",
    };
  },

  methods: {
    nodeClick(node, b, c) {
      console.log(node, b, c);
      this.value = node.title;
      this.$refs.selectTree.blur();
      this.$emit("nodePid", node.pid);
      // this.pid = node.pid
    },
  },
};
</script>

<style lang="scss">
.tree-select__option {
  &.el-select-dropdown__item {
    height: auto;
    line-height: 1;
    padding: 0;
    background-color: #fff;
  }
}

.tree-select__tree {
  padding: 4px 20px;
  font-weight: 400;
  &.tree-select__tree--radio {
    .el-tree-node.is-current > .el-tree-node__content {
      font-weight: 700;
    }
  }
}
.show {
  display: none;
}
</style>
